<template>
  <div>
    <bread :second="'商品管理'" :third="'添加商品'"></bread>
    <!-- 表单 -->
    <el-card class="box-card">
      <el-alert title="添加商品信息" type="info" center show-icon></el-alert>
      <!-- 步骤条 -->
      <el-steps :active="+activeName" align-center style="margin:10px 0">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 标签页 -->
      <el-tabs
        v-model="activeName"
        :tab-position="tabPosition"
        :before-leave="beforeLeave"
        style="height: 100%;"
      >
        <el-tab-pane name="0" label="基本信息">
          <!-- 基本信息 -->
          <el-form
            ref="formAdd"
            :rules="rules"
            style="text-align: left;"
            label-position="top"
            :model="formAdd"
            label-width="80px"
          >
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="formAdd.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="formAdd.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="formAdd.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="formAdd.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                v-model="formAdd.goods_cat"
                :options="catelist"
                clearable
                :props="options"
                expandTrigger="hover"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="1" label="商品参数">
          <!-- 商品参数 -->
          <div v-for="(item,index) in ManyDataList" :key="index" style="text-align: left;">
            <p>{{item.attr_name}}</p>
            <el-checkbox
              style="margin:5px"
              v-model="item.attr_vals"
              v-for="(item1,index1) in item.attr_vals"
              :key="index1"
              :label="item1"
              border
            ></el-checkbox>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="商品属性">
          <!-- 静态属性 -->

          <!-- 表单 -->
          <el-form
            ref="formAdd"
            label-position="top"
            style="text-align: left;"
            :model="formAdd"
            label-width="80px"
          >
            <el-form-item
              v-for="(item,index) in onlyDataList"
              :key="index"
              :label="item.attr_name"
            >
           
            <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane name="3" label="商品图片">
          <!-- 上传图片 -->
          <el-upload
            class="upload-demo"
            :headers="headers"
            action="http://127.0.0.1:8888/api/private/v1/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="fileSuccess"
            :file-list="fileList"
            list-type="picture"
          >

        <el-button size="small" type="primary" name="file">点击上传</el-button>
          </el-upload>
          <!-- 上传图片 -->
        </el-tab-pane>
        <el-tab-pane name="4" label="商品内容">
            <!-- 富文本 -->
        <quillEditor v-model="formAdd.goods_introduce" style="height:350px;"></quillEditor>
        <div style="text-align: left;">
         <el-button type="primary" @click="AddGoods">添加商品</el-button>
         </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 图片预览弹出层 -->
    <el-dialog title="预览商品图片" :visible.sync="dialogTableVisible" width="50%">
        <img :src="PicUrl" alt="" width="100%">
    </el-dialog>
  </div>
</template>

<script>
// 导入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//  深克隆
import _ from 'lodash'
import { quillEditor } from 'vue-quill-editor'
import { categoriesList_api, cateParamsList_api,GoodsShopingList_api } from "@/api/index.js";
export default {
  data() {
    return {
      // 图片上传
      fileList: [],
      formOnly: {
        name: "",
      },
      PicUrl:'',
    dialogTableVisible:false,
    headers:{
        Authorization:window.sessionStorage.getItem('token')
        },
      // 下拉列表
      params: { type: 3 },
      catelist: [],
      options: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      tabPosition: "left",
      activeName: "0",
      // 动态参数
      ManyDataList: {},
      // 静态参数
      onlyDataList: {},
      // 基本信息
      formAdd: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: [],
        goods_introduce:'',
        pics:[],
        attrs:[]

      },
      // 表单效验
      rules: {
        goods_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getGoodsFl();
  },
// 导入富文本局部组件
components: {
    quillEditor
  },
  methods: {
    // 图片上传
    // 删除图片
    handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // 通过filter过滤器 过滤掉被点击删除过的图片路径返回新数组
    this.formAdd.pics=this.formAdd.pics.filter(item=>{ item.pic != file.response.data.tmp_path })
    },
    // 图片预览
    handlePreview(file) {
      console.log(file,1122);
      this.dialogTableVisible=true
      this.PicUrl = "http://127.0.0.1:8888/" + file.response.data.tmp_path
      console.log( this.PicUrl);
      
    },
    fileSuccess(response){
        // 将获取到的图片路径添加到对象里
        this.formAdd.pics.push({pic:response.data.tmp_path})
        // console.log(response,1100);
        
    },
    // 图片上传

    handleChange() {
      if (this.formAdd.goods_cat.length != 3) {
        this.formAdd.goods_cat = [];
      }
    },
    beforeLeave(activeName) {
      //console.log(activeName);//点击切换的时候可以获取点击的哪个元素
      if (activeName != 0 && this.formAdd.goods_cat.length != 3) {
        this.$message.error("请选择商品分类！");
        return false;
      }
      this.ManyFunc(activeName);
      this.onlyFunc(activeName);
    },
    async ManyFunc(activeName) {
      // 商品参数
      if (activeName == 1) {
        var id = this.formAdd.goods_cat[this.formAdd.goods_cat.length - 1];
        var sel = "many";
        const { data: res } = await cateParamsList_api({ id, sel });
        // console.log(res,7788);
        res.data.forEach((item) => {
          item.attr_vals = item.attr_vals.split(",");
        });

        this.ManyDataList = res.data;
      }
    },
    async onlyFunc(activeName) {
      // 商品参数
      if (activeName == 2) {
        var id = this.formAdd.goods_cat[this.formAdd.goods_cat.length - 1];
        var sel = "only";
        const { data: res } = await cateParamsList_api({ id, sel });
        // console.log(res, 7788);
        // res.data.forEach((item) => {
        //   item.attr_vals = item.attr_vals.split(",");
        // });

        this.onlyDataList = res.data;
      }
    },
    // 获取下拉列表数据
    async getGoodsFl() {
      const { data: res } = await categoriesList_api(this.params);
      // 商品分类列表
      this.catelist = res.data;
    },
    // 添加商品
    AddGoods(){
       var cloneFormAdd = _.cloneDeep(this.formAdd)
       cloneFormAdd.goods_cat = cloneFormAdd.goods_cat.join(',') 
    //    console.log(cloneFormAdd,2333);
       
        // 二次验证 GoodsShopingList_api
         this.$refs.formAdd.validate(async valide=>{
             if(!valide) return
            //  发送请求
            const {data:res} = await GoodsShopingList_api(cloneFormAdd)
            
            console.log(res,233);
             this.$message({
            type: 'success',
            message: res.meta.msg
          });
          if(res.meta.status==201){
              this.$router.push('/goods')
          }
            

         })
    }
  },
};
</script>

<style lang="less">
.upload-demo {
  text-align: left;
}
 .box-card {

    //  deep 穿透  穿刺
    /deep/.ql-container {
      height: 250px;
      
    }
  }

</style>